{% extends 'sales/base.html' %}
{% load static %}
{% block content %}

<div class="row marl heading_create">
  <div class="heading col-md-2">CALLS</div>
  <div class="col-md-7">
    <div class="row marl search-row">
      <form id="filter-form" method="get">
        <div class="form-group col-md-8 col-sm-8">
          <div class="input-group">
            <input placeholder="Search Calls" type="text" class="form-control text-filter"
              name="event_name" value="" tabindex="1">
            <div class="input-group-btn">
              <button type="button" class="btn btn-primary search searchmeetings btn-icon"
                data-action="search">
              <span class="glyphicon glyphicon-search"></span>
              </button>
            </div>
          </div>
          <input type="hidden" name="event_type" value="Call"/>
          <div class="addedFilters">
            <div class="input-group parent-filter">
              <span class="input-group-btn">
                <select class="form-control input-sm" id="parent_type-filter" name="parent_type"
                  style="width:100px">
                  <option value="Account">Account</option>
                  <option value="Lead">Lead</option>
                  <option value="Opportunity">Opportunity</option>
                  <option value="Case">Case</option>
                </select>
              </span>
              <input placeholder="Select" autocomplete="off" value="" name="parent_name"
                class="main-element form-control input-sm parent_name" type="text">
              <span class="input-group-addon">
              <span title="Select" id="selectparent">
              <i class="glyphicon glyphicon-arrow-up"></i>
              </span>&nbsp;&nbsp;
              <span class="remove-this-filter">
              <i class="glyphicon glyphicon-remove"></i>
              </span>
              </span>
              <input type="hidden" value="" class="parent_id" name="parent_id">
            </div>
            <div>
              <div class="input-group assigned-user-filter">
                <input placeholder="Select Assigned User" autocomplete="off"
                  id="assigned_username-filter"
                  value=""
                  name="username" class="main-element form-control input-sm" type="text">
                <span class="input-group-addon">
                <span title="Select" id="assign-user">
                <i class="glyphicon glyphicon-arrow-up"></i>
                </span>&nbsp;&nbsp;
                <span class="remove-this-filter">
                <i class="glyphicon glyphicon-remove"></i>
                </span>
                </span>
              </div>
              <div class="selected-assigned-users"></div>
              <i class="assigned_users_error"></i>
            </div>
            <div>
              <div class="input-group attendees-users-filter" data-name="attendees-users-filter">
                <input placeholder="Select Attendee Users" autocomplete="off"
                  class="main-element form-control input-sm attendees-users-user_name" value=""
                  name="username" type="text">
                <span class="input-group-addon">
                <span title="Select" id="selectusers">
                <i class="glyphicon glyphicon-arrow-up"></i>
                </span>&nbsp;&nbsp;
                <span class="remove-this-filter">
                <i class="glyphicon glyphicon-remove"></i>
                </span>
                </span>
                <i id="attendees_user_error"></i>
              </div>
            </div>
            <div class="input-group date startdatepicker created_at-filter">
              <input name="created_at" class="form-control"
                placeholder="Created Time MM/DD/YYYY HH:MM:SS" required="" type="text">
              <span class="input-group-addon">
              <span class="glyphicon glyphicon-calendar">
              </span> &nbsp;
              <span class="glyphicon glyphicon-remove remove-this-filter">
              </span>
              </span>
            </div>
            <i id="start_date_error"></i>
            <div class="input-group date startdatepicker updated_at-filter">
              <input name="updated_at" class="form-control"
                placeholder="Modified Time MM/DD/YYYY HH:MM:SS" required="" type="text">
              <span class="input-group-addon">
              <span class="glyphicon glyphicon-calendar">
              </span>&nbsp;
              <span class="glyphicon glyphicon-remove remove-this-filter"></span>
              </span>
              </span>
            </div>
            <i id="updated_at_error"></i>
            <div class="input-group date startdatepicker start_date-filter">
              <input name="start_date" class="form-control"
                placeholder="Start Date MM/DD/YYYY HH:MM:SS" required="" type="text">
              <span class="input-group-addon">
              <span class="glyphicon glyphicon-calendar">
              </span> &nbsp;
              <span class="glyphicon glyphicon-remove remove-this-filter">
              </span>
              </span>
            </div>
            <i id="created_at_error"></i>
            <div class="input-group created_user-filter">
              <input placeholder="Select Created User" autocomplete="off" id="created_user_username"
                value=""
                name="username" class="main-element form-control input-sm" type="text">
              <span class="input-group-addon">
              <span title="Select" id="created-user">
              <i class="glyphicon glyphicon-arrow-up"></i>
              </span>&nbsp;&nbsp;
              <span class="remove-this-filter">
              <i class="glyphicon glyphicon-remove"></i>
              </span>
              </span>
              <div class="selected-created-user"></div>
            </div>
            <div>
              <div class="input-group attendees-contacts-filter" data-name="attendees-contacts">
                <input placeholder="Select Attending Contacts" autocomplete="off" id="contact_name"
                  value=""
                  class="main-element form-control input-sm" type="text">
                <span class="input-group-addon">
                <span title="Select" id="select-attendee-contacts">
                <i class="glyphicon glyphicon-arrow-up"></i>
                </span>
                <span class="remove-this-filter">
                <i class="glyphicon glyphicon-remove"></i>
                </span>
                </span>
                <div class="selectedcontacts"></div>
              </div>
              <i class="attendees_contacts_error"></i>
            </div>
            <div class="input-group status-filter">
              <select class="form-control main-element input-sm" id="status" name="status">
                <option selected="" value="Planned">Planned</option>
                <option value="Held">Held</option>
                <option value="Not Held">Not Held</option>
              </select>
              <span class="input-group-addon remove-this-filter">
              <i class="glyphicon glyphicon-remove"></i>
              </span>
            </div>
          </div>
        </div>
        <div class="form-group col-md-4 col-sm-4">
          <div class="btn-group">
            {#                            <button type="button" class="btn btn-default extra_option_btn reset-filters"#}
            {#                                    data-action="reset">#}
            {#                                <span class="glyphicon glyphicon-repeat"></span>&nbsp;Reset#}
            {#                            </button>#}
            <button type="button"
              class="btn btn-default dropdown-toggle extra_option_btn add-filter-button"
              data-toggle="dropdown" tabindex="-1">
            Add Field <span class="caret"></span>
            </button>
            <ul class="dropdown-menu pull-right filter-list">
              <li class="filterfield" id="faccount"><a href="#" class="parent-filter">Parent</a></li>
              <li class="filterfield" id="fassignedUser"><a href="#" class="assigned-user-filter">Assigned
                User</a>
              </li>
              <li class="filterfield" id="fcreatedAt"><a class="created_at-filter" href="#">Created
                At</a>
              </li>
              <li class="filterfield" id="fcreatedBy"><a class="created_user-filter" href="#">Created
                By</a>
              </li>
              <li class="filterfield" id="fdateStart"><a class="start_date-filter" href="#">Date
                Start</a>
              </li>
              <li class="filterfield" id="fmodifiedAt"><a class="updated_at-filter" href="#">Modified
                At</a>
              </li>
              <li class="filterfield" id="fstatus"><a class="status-filter" href="#">Status</a></li>
              <li class="filterfield" id="fusers"><a class="attendees-users-filter" href="#">Attending
                Users</a>
              </li>
              <li class="filterfield" id="fcontacts"><a class="attendees-contacts-filter" href="#">Contacts</a>
              </li>
            </ul>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div class="create_new col-md-3 text-right">
    <a href="#" id="createcall" data-toggle="modal" data-target="#call-create-model"><i
      class="fa fa-plus"></i> Create Call</a>
  </div>
</div>


<div class="filter_row row marl">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        filters
      </div>
      <div class="panel-content">
        <div class="filter_col col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Account</label>
            <input type="text" class="form-control" placeholder="Account">
          </div>
        </div>
        <div class="filter_col col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Created</label>
            <input type="text" class="form-control" placeholder="Created">
          </div>
        </div>
        <div class="filter_col col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Phone</label>
            <input type="text" class="form-control" placeholder="Phone">
          </div>
        </div>
        <div class="filter_col col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Assigned User</label>
            <select class="form-control">
              <option>1</option>
            </select>
          </div>
        </div>
        <div class="filter_col col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Email</label>
            <input type="text" class="form-control" placeholder="Email">
          </div>
        </div>
        <div class="filter_col col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Assigned User</label>
            <label for="exampleInputEmail1">Teams</label>
            <select class="form-control">
              <option>1</option>
            </select>
          </div>
        </div>
        <div class="filter_col col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Title</label>
            <label for="exampleInputEmail1">Teams</label>
            <select class="form-control">
              <option>1</option>
            </select>
          </div>
        </div>
        <br clear="all">
      </div>
    </div>
  </div>
</div>
</div>

<div class="table_container_row row marl">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-content for-pagination">
        {% include 'planner/calls_list.html' %}
      </div>
      
      <form id="model-form" method="post">
        <div class="modal fade" id="call-create-model" role="dialog" data-keyboard="false"
          data-backdrop="static">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <h4 id="create-call-dialog-title" class="modal-title">Create New Call</h4>
              </div>
              <div id="modelbody" class="modal-body">
                <div class="panel-body">
                  <div class="row">
                    <div class="cell col-sm-4 form-group inline-group" data-name="name">
                      <label class="control-label" data-name="name">
                      Name *
                      </label>
                      <input type="hidden" name="event_type" value="Call"/>
                      <input id="name" class="main-element form-control input-sm" type="text"
                        autocomplete="off"
                        name="name" required/>
                      <i id="name_error"></i>
                    </div>
                    <div class="cell col-sm-4 form-group" data-name="assigned-user"
                      style="border-left: 1px">
                      <div class="field" data-name="assigned_user">
                        <label for="assigned_user">Assigned User </label>
                        <div class="form-group" data-name="assigned_user">
                          <div class="input-group">
                            <input type="text" placeholder="Select" autocomplete="off"
                              id="assigned_username" value="" name="username"
                              class="main-element form-control input-sm">
                            <span class="input-group-btn">
                            <button title="Select" tabindex="-1" type="button" class="btn btn-default input-sm" id="assign-user"><i
                              class="glyphicon glyphicon-arrow-up"></i></button>
                            </span>
                          </div>
                          <div class="selected-assigned-users"></div>
                          <i id="assigned_users_error"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="cell col-sm-4 form-group" data-name="parent">
                      <div class="field" data-name="parent">
                        <label for="parent">Parent </label>
                        <div data-name="parent" class="form-group">
                          <div class="input-group">
                            <span class="input-group-btn">
                              <select class="form-control input-sm" id="parent_type" name="parent_type" style="width:100px">
                                <option value="Account">Account</option>
                                <option value="Lead">Lead</option>
                                <option value="Opportunity">Opportunity</option>
                                <option value="Case">Case</option>
                              </select>
                            </span>
                            <input placeholder="Select" autocomplete="off"
                              id="parent_name" value="" name="parent_name"
                              class="main-element form-control input-sm"
                              type="text">
                            <span class="input-group-btn">
                            <button title="Select" tabindex="-1" type="button" class="btn btn-default btn-sm" id="selectparent"><i
                              class="glyphicon glyphicon-arrow-up"></i></button>
                            <button tabindex="-1" type="button" class="btn btn-default btn-sm" id="clearparent">
                            <i class="glyphicon glyphicon-remove"></i></button>
                            </span>
                          </div>
                          <i id="parent_error"></i>
                          <input type="hidden" name="parent_id" id="parent_id"
                            value="">
                        </div>
                      </div>
                    </div>
                    <div class="cell col-sm-4 form-group" data-name="status">
                      <label class="control-label" data-name="status"> Status</label>
                      <div class="field" data-name="status">
                        <select class="form-control main-element" id="status" name="status">
                          <option selected="" value="Planned">Planned</option>
                          <option value="Held">Held</option>
                          <option value="Not Held">Not Held</option>
                        </select>
                        <i id="status_error"></i>
                      </div>
                    </div>
                    <div class="cell col-sm-4 form-group" data-name="attendees-contacts">
                      <div class="field" data-name="attendees-contacts">
                        <label for="attendees-contacts">Attendees Contacts </label>
                        <div class="form-group" data-name="attendees-contacts">
                          <div class="input-group">
                            <input type="text" placeholder="Select" autocomplete="off"
                              id="contact_name" value=""
                              class="main-element form-control input-sm">
                            <span class="input-group-btn">
                            <button title="Select" tabindex="-1" type="button" class="btn btn-default input-sm"
                              id="select-attendee-contacts"><i
                              class="glyphicon glyphicon-arrow-up"></i></button>
                            </span>
                          </div>
                          <div class="selectedcontacts"></div>
                          <i id="attendees_contacts_error"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="cell col-sm-4 form-group" data-name="direction">
                      <label class="control-label" data-name="direction"> Direction </label>
                      <div class="field" data-name="direction">
                        <select class="form-control main-element" id="direction"
                          name="direction">
                          <option value="Inbound">Inbound</option>
                          <option value="Outbound">Outbound</option>
                        </select>
                        <i id="direction_error"></i>
                      </div>
                    </div>
                    <div class="cell col-sm-4 form-group" data-name="duration">
                      <label class="control-label" data-name="duration"> Duration </label>
                      <div class="field" data-name="duration">
                        <select class="form-control main-element" name="duration">
                          <option selected="" value="300">5m</option>
                          <option value="600">10m</option>
                          <option value="900">15m</option>
                          <option value="1800">30m</option>
                          <option value="2700">45m</option>
                          <option value="3600">1h</option>
                          <option value="7200">2h</option>
                        </select>
                        <i id="duration_error"></i>
                      </div>
                    </div>
                    <div class="cell col-sm-4 form-group" data-name="attendees-leads">
                      <div class="field" data-name="attendees-leads">
                        <label for="attendees-leads">Attendees Leads </label>
                        <div class="form-group" data-name="attendees-leads">
                          <div class="input-group">
                            <input type="text" placeholder="Select" autocomplete="off"
                              id="leads_name" value=""
                              class="main-element form-control input-sm">
                            <span class="input-group-btn">
                            <button title="Select" tabindex="-1" type="button" class="btn btn-default input-sm"
                              id="select-attendee-leads"><i
                              class="glyphicon glyphicon-arrow-up"></i></button>
                            </span>
                          </div>
                          <i id="attendees_leads_error"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="cell col-sm-4 form-group" data-name="dateStart">
                      <label class="control-label" data-name="dateEnd"> Date Start * </label>
                      <div class="form-group">
                        <div class='input-group input-group-sm date startdatepicker'>
                          <input type='text' class="form-control" id="start_date"
                            name="start_date"
                            required placeholder="MM/DD/YYYY HH:MM:SS"/>
                          <span class="input-group-addon">
                          <span class="glyphicon glyphicon-calendar"></span>
                          </span>
                        </div>
                        <i id="start_date_error"></i><br>
                      </div>
                    </div>
                    <div class="cell col-sm-4 form-group" data-name="reminders">
                      <label class="control-label" data-name="reminders"> Reminders </label>
                      <a type="button" id="addreminder" style="padding-top: 5px;border: none">
                      <span class="glyphicon glyphicon-plus"></span>
                      </a>
                      <div id="reminders" class="field" data-name="reminders">
                        <div class="reminders-container">
                          <div class="input-group reminder">
                            <input type="hidden" id="pushreminder"/>
                            <div id="reminder1">
                              {{ reminder_form_set.management_form }}
                              <div class="reminderslist"
                                style="display: inline-flex;">
                                {% for form in reminder_form_set %}
                                {{ form.reminder_type }}
                                {{ form.reminder_time }}
                                {{ form.DELETE }}
                                {{ form.id }}
                              </div>
                              {% endfor %}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="cell col-sm-4 form-group" data-name="attendees-users"
                      style="border-left: 1px">
                      <div class="field" data-name="attendees-users">
                        <label for="attendees-users">Attendees Users </label>
                        <div class="form-group" data-name="attendees-users">
                          <div class="input-group">
                            <input type="text" placeholder="Select" autocomplete="off"
                              id="user_name" value="" name="username"
                              class="main-element form-control input-sm">
                            <span class="input-group-btn">
                            <button title="Select" tabindex="-1" type="button" class="btn btn-default input-sm" id="selectusers"><i
                              class="glyphicon glyphicon-arrow-up"></i></button>
                            </span>
                          </div>
                          <div class="selectedusers"></div>
                          <i id="attendees_users_error"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="cell col-sm-12 form-group" data-name="description">
                      <label class="control-label" data-name="description">
                      Description </label>
                      <div class="field" data-name="description">
                        <textarea id="description" class="main-element form-control" rows="4"
                          name="description"
                          required></textarea>
                        <i id="description_error"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button id="modeldialogclosed" type="button" class="btn btn-default">Close
                </button>
                <button id="gocreatecall" type="submit" class="btn btn-success">Create
                </button>
              </div>
            </div>
          </div>
        </div>
      </form>
      
      
      <div class="modal fade" id="call-success-model" role="dialog">
        <div class="modal-dialog modal-sm">
          <div class="modal-content">
            <div class="modal-header">
              <h4 id="success-call-dialog-title" class="modal-title">Success!!!</h4>
            </div>
            <div id="call-created-alert" class="alert alert-success">
              <strong class="center-block">Call Created Successfully</strong>
            </div>
            <div class="modal-footer">
              <button id="successmodeldialogclosed" class="btn btn-default" type="button"> Close
              </button>
            </div>
          </div>
        </div>
        
      </div>
    </div>
    
    <div class="modal fade" id="call-delete-model" role="dialog" data-keyboard="false"
      data-backdrop="static">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
            <h4 id="delete-dialog-title" class="modal-title">Confirmation.</h4>
          </div>
          <div id="call-delete-alert" class="alert alert-success">
            <strong class="center-block">Are you soure to Delete??</strong>
          </div>
          <div class="modal-footer">
            <button class="btn btn-default" data-dismiss="modal"> No</button>
            <button id="deletecall" class="btn btn-default" type="button"> Yes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>


<div class="modal fade model-sm" id="selectparentmodel" role="dialog" data-keyboard="false"
  data-backdrop="static">
  <div class="modal-dialog">
    
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title"></h4>
      </div>
      <div class="model-body" id="selectcontact-modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" id="closeselectparentmodel" class="btn btn-default" data-dismiss="modal">Close
        </button>
      </div>
    </div>
  </div>
</div>

{% include 'planner/dialog_models.html' %}
<script src="{% static 'js/calls.js' %}"></script>
<script src="{% static 'js/setstatus.js' %}"></script>
{% endblock %}